<template>
	<view>
		<image class="bg-set" src="https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/FireAndFire/find/photo/bg.png"
			mode=""></image>
		<view class="banner">
			<u-sticky bgColor="none" >
				
				<view :class="[hasbg?'bgs':'']">
					<view class="search">
						<!-- <text>请输入您的姓氏，一键匹配头像</text> -->
						<view style="margin-right: 92px; width: 100%;">
							<u-input :clearable="true" style="width: 100%; color: #fff;" placeholder="请输入您的姓氏，一键匹配头像" v-model="keyword"
								type="text" />
						</view>
						
						<div class="icon">
							立即匹配
						</div>
					</view>
				</view>
			</u-sticky>


		</view>

		<!-- 推荐壁纸 -->
		<view v-for="(item,index) in list1" class="recomennd">
			<view class="list">
				<view class="item" v-for="inner in item.detaillist">

					<image @click="detail" class="img"
						:src="'https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/FireAndFire/find/photo/'+inner+'.png'"
						mode="">
					</image>
				</view>
			</view>
		</view>

	</view>

</template>
<script>
	export default {
		props:['scrollVal'],

		data() {
			return {
				keyword:"",
				hasbg:false,
				bgs:"#cccccc",
				list1: [{
					name: "出来饮啤酒",
					detaillist: [1, 2, 3, 4]
				}, {
					name: "毛孩子快来认领",
					detaillist: [5, 6, 7, 8]
				}, {
					name: "情侣专用壁纸",
					detaillist: [9, 10, 11, 12]

				}, {
					name: "我喜欢和你一起度过的夏天",
					detaillist: [13, 14, 15, 16]
				}, {
					name: "出来饮啤酒",
					detaillist: [1, 2, 3, 4]
				}, {
					name: "毛孩子快来认领",
					detaillist: [5, 6, 7, 8]
				}, {
					name: "情侣专用壁纸",
					detaillist: [9, 10, 11, 12]

				}, {
					name: "我喜欢和你一起度过的夏天",
					detaillist: [13, 14, 15, 16]
				}],
				ActiveStyle: {
					fontSize: '32rpx',
				},
				barSty: {
					width: '50rpx',
					height: '5rpx',
					background: '#68C3C9'
				},
				list: [{
					name: '推荐'
				}, {
					name: '最新'
				}, {
					name: 'VIP专区'
				}, {
					name: '星空'
				}, {
					name: '海边'
				}, {
					name: '春天的花花'
				}],
				current: 0,

				inputStyle: {
					backgroundColor: 'none'
				},
			};
		},
		onLoad() {

		},
		// watch:{
		// 	scrollVal:{
		// 		handler(e){
					
		// 			if(e>=120){
		// 				this.hasbg=true
		// 			}else{
		// 				this.hasbg=false
		// 			}
		// 		},
		// 		// immediate:true
		// 	}
		// },
		
		onPageScroll(e) { //uniapp自带的监听滚动条方法
		console.log(e,55555555);
			if(e.scrollTop>=50){
				this.hasbg=true
			}else{
				this.hasbg=false
			}
		
		},
		
		
		 
		methods: {
			change(index) {
				this.current = index;
			},
			detail() {
				uni.navigateTo({
					url: "/subpackFind/photoDetail"
				})
			}


		}
	};
</script>
<style scoped lang="scss">
	/deep/ .u-input__input{
	
		color: #FFFFFF;
		font-size: 14px;
	}
	.bg-set {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 283rpx;
	}

	.banner {
		padding: 158rpx 0 0;
		
		.bgs{
			overflow: hidden;
			width:100%;
			background: rgba(19, 20, 32, 0.95);
		}

		.search {
			position: relative;
			padding-left: 48rpx;
			font-size: 28rpx;
			font-family: PingFang SC,
				PingFang SC;
			font-weight: 300;
			color: #FFFFFF;
			display: flex;
			align-items: center;

			width: 702rpx;
			height: 92rpx;
			background: rgba(255, 255, 255, 0.06);
			border-radius: 53rpx 53rpx 53rpx 53rpx;
			margin: 0 auto;

			border: 2rpx solid #455FE8;


			.icon {
				position: absolute;
				right: 10rpx;
				top: 10rpx;
				z-index: 3;
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 33rpx;

				width: 177rpx;
				height: 72rpx;
				background: #455FE8;
				border-radius: 68rpx 68rpx 68rpx 68rpx;

				display: flex;
				align-items: center;
				justify-content: center;

				.imgs {
					width: 51rpx;
					height: 51rpx;
				}
			}
		}
	}

	.wrap {

		// margin: 0 32rpx;
		.bg-set {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 181rpx;
		}


	}

	/deep/ .u-tab-bar {
		margin-left: -3px !important;
	}

	.list {
		display: flex;
		align-items: center;

		.item {
			width: 161rpx;
			height: 161rpx;
			margin-right: 20rpx;

			&:last-child {
				margin-right: 0;
			}

			.img {
				width: 161rpx;
				height: 161rpx;
				border-radius: 20rpx;
			}
		}
	}


	.data-list {
		width: 100%;
		white-space: nowrap;
		margin: 24rpx 0 35rpx 0;
	}

	.data-list-item {
		display: inline-block;
		margin-right: 20rpx;

		.box {
			display: flex;
			align-items: center;
			background: rgba(255, 121, 121, 0.48);
			padding: 4rpx 18rpx 0 0;
			border-radius: 49rpx;
			font-size: 22rpx;
			font-family: PingFang HK-Light, PingFang HK;
			font-weight: 300;
			color: #FFFFFF;

			.image {
				width: 39rpx;
				height: 40rpx;
			}
		}
	}

	.recomennd {

		margin: 35rpx 32rpx 24rpx;

		.rec {
			// padding: 50rpx 0 24rpx 0;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 27rpx;

			.title {

				font-size: 25rpx;
				font-family: PingFang HK-Light, PingFang HK;
				font-weight: 300;
				color: #FFFFFF;
				display: flex;
				align-items: center;

				.vip {
					width: 35rpx;
					height: 35rpx;
					margin-right: 3rpx;
				}

				.line1 {
					margin-right: 10rpx;
					height: 24rpx;
					width: 5rpx;
					background: linear-gradient(to bottom, #05FAFE, #EF44C4);
					border-radius: 12rpx;
				}
			}

			.more {
				font-size: 27rpx;
				font-family: PingFang HK-Light, PingFang HK;
				font-weight: 300;
				color: #FFFFFF;
				line-height: 32rpx;
				display: flex;
				align-items: center;

				.img {
					width: 9rpx;
					height: 16rpx;
					margin-left: 10rpx;
				}
			}
		}


	}
</style>
